<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script>
	$(function() {
		$( "input:submit, a, button", ".login" ).button();
		$( "a", ".demo" ).click(function() { return false; });
	});
	$(function() {
		function log( message ) {
			$( "<div/>" ).text( message ).prependTo( "#log" );
			$( "#log" ).scrollTop( 0 );
		}

		$( "#city" ).autocomplete({
			source: "AlleAngebote.html",
			minLength: 2,
			select: function( event, ui ) {
				log( ui.item ?
					"Selected: " + ui.item.value + " aka " + ui.item.id :
					"Nothing selected, input was " + this.value );
			}
		});
	});
</script>
<script type="text/javascript">
// Kartenparameter beim Laden der Seite festlegen
var map;
var marker;

$(document).ready(
	function() {	
		// Das Element fÃ¼r die Anzeige suchen
	    var m = $("#map")[0];
	
		// Mittelpunkt der Karte
		var myLatlng = new google.maps.LatLng(48.84128, 12.9574);
	    var myOptions = {
	        // VergrÃ¶sserungsfaktor
	        // 0: Welt
	        // 1: Halbkugel
	        // [...]
	        // 16: Ein paar StraÃŸenzÃ¼ge
	        // 20: Voller Zoom
	        zoom:1,
	        // Zentrum setzen
	        center: myLatlng,
	        mapTypeId: google.maps.MapTypeId.ROADMAP
	    };
		map = new google.maps.Map(m, myOptions);
	}
);


function setMarkerCity(city, user, title) {
	// Adresse zu LatLong
	var mygc = new google.maps.Geocoder();

	// Marker
	mygc.geocode({'address' : city }, function(results, status){
		makeMarker({
			position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
			title: title, 
			content: "<div class=balloon><img src=img/schlafplatz.png><h1>" + city + "</h1><h2>" + user + "</h2><div>" 
		});
	});
}
</script>
<div class="list-angebote">
	<div class="">
		<label for="city">Wähle eine Stadt: </label> <input id="city" />
	</div>
	<div class="ui-widget" style="margin-top: 2em; font-family: Arial">
		Result:
		<div id="log" style="height: 50px; width: 100px; overflow: auto;"
			class="ui-widget-content"></div>
	</div>
	<script type="text/javascript">
		setMarkerCity("Deggendorf", "BenutzerXY", "Schlafplatz");
	</script>
	<!--
	<table class="listing">
				<tr>
					<th></th>
					<th>Von - Bis</th>
				</tr>
 
			<c:forEach items="${angebote}" var="angebot">
				<tr>
					<td>
						<a href="AngebotLoeschen.html?id=<c:out value="${angebot.id}"/>">
							<img src="img/close.png" alt="Löschen"/>
						</a>
					</td>
					<td>
						<a href="PersonAnzeigen.html?id=<c:out value="${angebot.id}"/>">
							<c:out value="${angebot.id}"/> <c:out value="${angebot.id}"/>
						</a>
					</td>
					<td><c:out value="${angebot.anbieter}"/></td>
				</tr>
			</c:forEach>  
	</table>
-->
	<div id="map" class="map"></div>
</div>